<template>
    <div class="modal fade" id="exampleModal" :class="{
        'show': status ? true : false
    }" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" ref="div">
            <div class="modal-content">
                <div v-if="!options.custom">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ options.titel }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            @click="changStatus()"></button>
                    </div>
                    <div class="modal-body">
                        {{ options.context ? options.context : '' }}
                    </div>
                </div>
                <div v-else>
                    {{ options.custom }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn  btn-secondary" v-if="!options.hiddenCancel"
                        @click="cancelBack()">{{
                                options.cancelText ?
                                    options.cancelText
                                    : '取消'
                        }}</button>
                    <button type="button" class="btn btn-primary" @click="onBack()" data-bs-dismiss="modal">{{
                            options.okText ? options.okText : '确定'
                    }}</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { ref, defineComponent, PropType, Ref, watch } from 'vue'
import { Options } from './index'
export default defineComponent({
    name: 'Model',
    props: {
        status: {
            type: Object as PropType<Ref<boolean>>,
            required: true
        },
        options: {
            type: Object as PropType<Options>,
            required: true
        },
        changStatus: {
            type: Function,
            required: true
        },
        onBack: {
            type: Function,
            required: true
        },
        cancelBack: {
            type: Function,
            required: true
        },
    },
    setup({ status, changStatus }) {
        const div = ref<HTMLDivElement | null>(null)
        return { status, div, changStatus }
    }
})
</script>
<style scoped lang="less">
.show {
    opacity: 1;
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
}
</style>